import React, {memo, useEffect, useState} from 'react';

import "./allelicdiscrimination.css";
import AllelicTable from "../../../../../components/allelicTable/AllelicTable";
import {Dropdown, Menu} from "antd";
import {MENU_STYLE, WELLS_COLUMN, WELLS_ROW} from "../../../plate/config";
import {useDispatch, useSelector} from "react-redux";
import {saveAllelicOption, saveAllelicOption2, saveAllelicSetting, saveAllelicTableData, saveAllelicTableWell, saveAngleArr, saveDegree} from "./store/actionCreators";
import {WELL_TYPE} from "../../../store/constants";
import AllelicChart from "../../../../../components/allelicChart/AllelicChart";
import pic_allele1 from "./images/allele1.png";
import pic_allele2 from "./images/allele2.png";
import pic_allele1allele2 from "./images/allele1allele2.png";
import pic_heterozygote from "./images/heterozygote.png";
import pic_ntc from "./images/ntc.png";
import pic_undeterimined from "./images/undeterimined.png";
import pic_control1 from "./images/control1.png";
import pic_control2 from "./images/control2.png";
import {useDebounce} from "../../../../../common/myHooks";
import {deepClone, arcTanValue, slopToAngle, getTargetIndex, kMeans, angleToSlop, getCircle} from "../../../../../common/utils";
import {DATA_ANALYSIS_METHOD} from "../quantification/config";
import {objCall, objWell} from "./config";
import * as echarts from "echarts";

export default memo(function AllelicDiscrimination() {
  const dispatch = useDispatch();
  const {
    data,
    allelicTableWell,
    allelicSetting,
    allelicOption,
    allelicOption2,
    allelicBoundary,
    allelicTableData,
    pcrAllCycle,
    dataAnalysisMethod,
    isCN,
    angleSetting,
    degree
  } = useSelector(
    state => ({
      data: state.dataReducer.data,
      angleSetting: state.allelicReducer.angleSetting,
      allelicTableWell: state.allelicReducer.allelicTableWell,
      allelicSetting: state.allelicReducer.allelicSetting,
      allelicOption: state.allelicReducer.allelicOption,
      allelicOption2: state.allelicReducer.allelicOption2,
      allelicBoundary: state.allelicReducer.allelicBoundary,
      allelicTableData: state.allelicReducer.allelicTableData,
      pcrAllCycle: state.protocolReducer.pcrAllCycle,
      dataAnalysisMethod: state.quantificationReducer.dataAnalysisMethod,  //  分析的方法(3种)
      degree: state.allelicReducer.degree,
      isCN: state.languageReducer.isCN
    }));
  const [isCq, setIsCq] = useState(false);  //  切换 Cq RFU
  const [angles, setAngle] = useState([]);  //  切换 RFU 分组的角度组
  const [xLineValue, setXLineValue] = useState(37);  //   X轴拖动线
  const [yLineValue, setYLineValue] = useState(37);  //   Y轴拖动线
  const [wellId, setWellId] = useState(-1);
  const [center, setCenter] = useState({});
  const [series, setSeries] = useState([]);
  const [axisAllele, setAxisAllele] = useState(data.plateSetting.targets.map(item => item.channel));//  X-Axis 和 Y-Axis 菜单选项
  let cloneAllelicSetting = {};
  let cloneAllelicOption2 = {};

  //  记录拖动线的位置
  useEffect(() => {
    cloneAllelicSetting = deepClone(allelicSetting, cloneAllelicSetting);
    cloneAllelicSetting.horizontal = xLineValue;
    cloneAllelicSetting.vertical = yLineValue;
    dispatch(saveAllelicSetting(cloneAllelicSetting));
  }, [xLineValue, yLineValue]);

  //  叠加的 echarts 图表 负责控制阈值线拖动,避免循环引用导致useEffect陷入死循环
  useEffect(() => {
    let allelicOption2;
    if (isCq) {
      let axisData = new Array(pcrAllCycle + 1).fill(0).map((item, index) => index);
      allelicOption2 = {
        grid: {
          x: 55,
          y: 50,
          x2: 30,
          y2: 20
        },
        tooltip: {
          show: false,
          triggerOn: 'none'  //提示框无触发
        },
        xAxis: {
          type: 'category',   //类目轴，适用于离散的类目数据
          min: 25,
          // splitNumber:5,
          data: axisData,
          axisPointer: {  //    默认不显示
            value: allelicSetting.horizontal,  //可以设置此值进行初始值设定，从而决定 axisPointer 的初始位置。
            snap: true,  //坐标轴指示器是否自动吸附到点上。默认自动判断。可以自动寻找细小的数值点。
            lineStyle: {
              color: '#1f66ff',
              width: 2
            },
            label: {
              show: false,
              formatter: function (params) {
                setXLineValue(Number(params.value));
              },
              backgroundColor: '#7581BD'
            },
            handle: {
              margin: 0,//手柄与轴的距离
              size: allelicSetting.assignCallAuto ? 0 : 10,
              show: true,
              color: '#7581BD'
            }
          }
        },
        yAxis: {
          type: 'category',
          min: 25,
          data: axisData,
          axisPointer: {
            value: allelicSetting.vertical,
            snap: true,
            lineStyle: {
              color: '#ff1f1f',
              width: 2
            },
            label: {
              show: false,
              formatter: function (params) {
                setYLineValue(Number(params.value));
              },
              backgroundColor: '#7581BD'
            },
            handle: {
              margin: 0,
              size: allelicSetting.assignCallAuto ? 0 : 10,
              show: true,
              color: '#7581BD'
            }
          }
        },
        series: []
      };
      dispatch(saveAllelicOption2(allelicOption2));
    }
    setAxisAllele(data.plateSetting.targets.map(item => item.channel));
  }, [data, allelicSetting.assignCallAuto, isCq]);

  //  echarts图表
  useEffect(() => {
    let axisData = new Array(pcrAllCycle + 1).fill(0).map((item, index) => index);
    let xChannelIndex = 0,
      yChannelIndex = 0,
      seriesData = [];
    let allelicChartOption;
    data.targets.forEach(item => {
      item.channel === allelicSetting.xAxis && (xChannelIndex = item.channelIndex);
      item.channel === allelicSetting.yAxis && (yChannelIndex = item.channelIndex);
    });
    if (isCq) {
      data.wells.forEach(item => {
        let xData = item.lines[xChannelIndex].cq,
          yData = item.lines[yChannelIndex].cq;
        seriesData.push([xData, yData]);
      });
      allelicChartOption = {
        grid: {
          x: 55,
          y: 50,
          x2: 30,
          y2: 20
        },
        tooltip: {
          show: false,
          triggerOn: 'none'
        },
        xAxis: {
          type: 'category',
          min: 25,
          data: axisData
        },
        yAxis: {
          type: 'category',
          min: 25,
          data: axisData
        },
        series: [
          {
            symbol: (value, params) => {
              let xCq = value[0], yCq = value[1], index = params.dataIndex;
              //  第一象限
              if ((xCq >= allelicSetting.horizontal || xCq < 0) && (yCq >= allelicSetting.vertical || yCq < 0)) {
                if (data.wells[index].type === WELL_TYPE.NTC) {
                  return "image://" + pic_ntc;
                } else if (data.wells[index].type === WELL_TYPE.UNK || data.wells[index].type === WELL_TYPE.POS) {
                  return "image://" + pic_undeterimined;
                } else {
                  return "none";
                }
              }
              // 第二象限
              if (xCq < allelicSetting.horizontal && (yCq >= allelicSetting.vertical || yCq < 0)) {
                if (data.wells[index].type === WELL_TYPE.UNK) {
                  return "image://" + pic_allele1;
                } else if (data.wells[index].type === WELL_TYPE.POS) {
                  return "image://" + pic_control1;
                } else {
                  return "none";
                }
              }
              // 第三象限
              if (xCq < allelicSetting.horizontal && yCq < allelicSetting.vertical) {
                if (data.wells[index].type === WELL_TYPE.UNK) {
                  return "image://" + pic_heterozygote;
                } else if (data.wells[index].type === WELL_TYPE.POS) {
                  return "image://" + pic_allele1allele2;
                } else {
                  return "none";
                }
              }
              // 第四象限
              if ((xCq >= allelicSetting.horizontal || xCq < 0) && yCq < allelicSetting.vertical) {
                if (data.wells[index].type === WELL_TYPE.UNK) {
                  return "image://" + pic_allele2;
                } else if (data.wells[index].type === WELL_TYPE.POS) {
                  return "image://" + pic_control2;
                } else {
                  return "none";
                }
              }
            },
            symbolSize: (value, params) => {
              if (wellId === params.dataIndex) {
                return 20;
              } else {
                return 10;
              }
            },
            data: seriesData,
            type: 'scatter'
          }
        ],
        animation: false
      };
      dispatch(saveAllelicOption(allelicChartOption));
    } else {
      let xChannelIndex = 0,
        yChannelIndex = 0,
        seriesData = [],
        seriesData1 = [],
        xAxisBaseline = [], yAxisBaseline = [];
      data.targets.forEach(item => {
        item.channel === allelicSetting.xAxis && (xChannelIndex = item.channelIndex);
        item.channel === allelicSetting.yAxis && (yChannelIndex = item.channelIndex);
      });
      data.wells.forEach(item => {
        let xData = item.lines[xChannelIndex][DATA_ANALYSIS_METHOD['Raw Data']][allelicSetting.cycle - 1],
          yData = item.lines[yChannelIndex][DATA_ANALYSIS_METHOD['Raw Data']][allelicSetting.cycle - 1];
        let valueX = item.lines[xChannelIndex][DATA_ANALYSIS_METHOD['Raw Data']][Math.ceil(item.lines[xChannelIndex].baseEndCycle / 2 + item.lines[xChannelIndex].baseStartCycle / 2)];
        let valueY = item.lines[yChannelIndex][DATA_ANALYSIS_METHOD['Raw Data']][Math.ceil(item.lines[yChannelIndex].baseEndCycle / 2 + item.lines[yChannelIndex].baseStartCycle / 2)];
        !isNaN(valueX) && valueX && xAxisBaseline.push(valueX);
        !isNaN(valueY) && valueY && yAxisBaseline.push(valueY);
        seriesData.push([xData, yData]);
        item.type !== "" && seriesData1.push([xData, yData]);
      });
      let firstData = seriesData1.map(item => item[0]);  //  x轴数据
      let secondData = seriesData1.map(item => item[1]); //  y轴数据
      setSeries(seriesData);
      let xMax = Math.max(...firstData);
      let yMax = Math.max(...secondData);
      let max_last = Math.max(Math.round(xMax), Math.round(yMax));
      //TODO:利用角度利用K-Means算分割区间
      // console.log(seriesData);
      // console.log(seriesData.filter(it => !(it[0] === 0 && it[1] === 0)));
      let regData = seriesData1.map((item) => arcTanValue(item[1], item[0]));//角度二维散点数据，实际为一维，每个元素第二位为0
      regData = regData.filter(it => !isNaN(it[0]) && !isNaN(it[1]) && it[0]);
      // console.log('regData',regData.map(i));
      // console.log('原始角度数据',regData);
      let resultKM = kMeans(regData, 3);
      // console.log('分类后结果',resultKM);

      if (!resultKM) {
        return;
      }
      let centroids = resultKM.centroids;
      let angleArr = centroids.map(it => it[0]).sort((b, a) => b - a);
      dispatch(saveAngleArr(angleArr));
      setAngle(angleArr);
      //找x、y轴处荧光强度最大的值
      let x_ = Math.max(...xAxisBaseline);
      let y_ = Math.max(...yAxisBaseline);
      let cloneCenter = getCircle(0, y_, x_, 0);
      //拖动扇形
      let degreeCur = [];
      resultKM.clusters.forEach(it => {
        let item = it.map(it_ => it_[0]);
        degreeCur.push(Math.min(...item));
        degreeCur.push(Math.max(...item));
      });
      degreeCur.sort((b, a) => b - a);
      degreeCur.pop();
      degreeCur.shift();
      cloneCenter.degree = degreeCur;//两段分割扇形起始终止;
      cloneCenter.resultKM = resultKM;
      dispatch(saveDegree(degreeCur));
      setCenter(cloneCenter);
      allelicChartOption = {
        grid: {
          id: 'gd',
          x: 55,
          y: 10,
          x2: 30,
          y2: 20
        },
        tooltip: {
          show: false,
          triggerOn: 'none'
        },
        xAxis: {
          id: 'x0',
          max: Math.round(xMax) + (xMax < 8 ? 1 : 2),
          min: 0,
          axisLine: {onZero: true}
        },
        yAxis: {
          id: 'y0',
          max: Math.round(yMax) + (yMax < 8 ? 1 : 2),
          min: 0,
          axisLine: {onZero: true}
        },
        series: [
          {
            id: 'allWells',
            showAllSymbol: 'true',
            symbol: (value, params) => {
              let xCq = value[0], yCq = value[1], index = params.dataIndex;
              let angle = slopToAngle(yCq, xCq);
              let angleIndex = getTargetIndex(angleArr, angle, resultKM);//angles:[NTC(3),A1(4),H(1),A2(2)]
              let a = cloneCenter.x2y2;//长半轴
              let b = cloneCenter.x1y1; //短半轴
              let max_SectorY = b * Math.sqrt(1 - (xCq * xCq) / (a * a));//椭圆公式
              if (xCq <= a && yCq <= max_SectorY) {
                if (data.wells[index].type !== '') {
                  return "image://" + pic_ntc;
                } else {
                  return 'none';
                }
              } else {
                if (data.wells[index].type === '') {
                  return 'none';
                } else if (data.wells[index].type === WELL_TYPE.NTC) {
                  return "image://" + pic_ntc;
                } else {
                  //区分Task不同的情况:
                  if (angle <= degreeCur[2] && angle >= degreeCur[1]) {
                    if (data.wells[index].type === WELL_TYPE.UNK) {
                      return "image://" + pic_heterozygote;
                    } else if (data.wells[index].type === WELL_TYPE.POS) {
                      return "image://" + pic_allele1allele2;
                    } else {
                      return "none";
                    }
                  } else if (angle > degreeCur[2]) {
                    if (data.wells[index].type === WELL_TYPE.UNK) {
                      return "image://" + pic_allele2;
                    } else if (data.wells[index].type === WELL_TYPE.POS) {
                      return "image://" + pic_control2;
                    } else {
                      return "none";
                    }
                  } else if (angle <= degreeCur[0]) {
                    if (data.wells[index].type === WELL_TYPE.UNK) {
                      return "image://" + pic_allele1;
                    } else if (data.wells[index].type === WELL_TYPE.POS) {
                      return "image://" + pic_control1;
                    } else {
                      return "none";
                    }
                  } else {
                    return "none";
                  }
                }
              }
            },
            emphasis: {
              itemStyle: {
                color: 'red'  // 突出显示的颜色
              },
              label: {
                show: true,
                formatter: '{b}',  // 显示散点的名称
                position: 'top'
              }
            },
            z: 300,
            symbolSize: (value, params) => {
              return 12;
            },
            data: seriesData,
            type: 'scatter'
          }
        ],
        animation: false
      };
      dispatch(saveAllelicOption2(allelicChartOption));
    }
  }, [data/*, wellId*/, allelicSetting.vertical, allelicSetting.horizontal, allelicSetting.assignCallAuto, allelicBoundary, isCq, allelicSetting.xAxis, allelicSetting.yAxis, allelicSetting.cycle]);


  useEffect(() => {
    let tableData = [];
    let cloneAllelicTableWell = new Array(96).fill(null);
    let xChannelIndex = 0,
      yChannelIndex = 0;
    data.targets.forEach(item => {
      item.channel === allelicSetting.xAxis && (xChannelIndex = item.channelIndex);
      item.channel === allelicSetting.yAxis && (yChannelIndex = item.channelIndex);
    });

    data.wells.forEach((item, index) => {
      let dataItem = {
        well: WELLS_ROW[item.row] + WELLS_COLUMN[item.col],
        omit: true,
        sampleName: item.sampleName,
        task: item.type,
        allele1Cq: item.lines[xChannelIndex].cq < 0 ? "NA" : item.lines[xChannelIndex].cq,
        allele2Cq: item.lines[yChannelIndex].cq < 0 ? "NA" : item.lines[yChannelIndex].cq,
        allele1RFU: item.lines[xChannelIndex][DATA_ANALYSIS_METHOD['Raw Data']][allelicSetting.cycle - 1],
        allele2RFU: item.lines[yChannelIndex][DATA_ANALYSIS_METHOD['Raw Data']][allelicSetting.cycle - 1],
        call: "",
        comments: ""
      };
      let xCq, yCq;
      if (isCq) {
        xCq = item.lines[xChannelIndex].cq;
        yCq = item.lines[yChannelIndex].cq;
        // 第一象限
        if ((xCq >= allelicSetting.horizontal || xCq < 0) && (yCq >= allelicSetting.vertical || yCq < 0)) {
          if (data.wells[index].type === WELL_TYPE.NTC) {
            cloneAllelicTableWell[index] = "ntc";
            dataItem.call = "NTC";
          } else if (data.wells[index].type === WELL_TYPE.UNK || data.wells[index].type === WELL_TYPE.POS) {
            cloneAllelicTableWell[index] = "undeterimined";
            dataItem.call = "Undeterimined";
          }
        }
        // 第二象限
        if (xCq < allelicSetting.horizontal && (yCq >= allelicSetting.vertical || yCq < 0)) {
          if (data.wells[index].type === WELL_TYPE.UNK) {
            cloneAllelicTableWell[index] = "allele1";
            dataItem.call = "Allele 1";
          } else if (data.wells[index].type === WELL_TYPE.POS) {
            cloneAllelicTableWell[index] = "control1";
            dataItem.call = "Control 1";
          }
        }
        // 第三象限
        if (xCq < allelicSetting.horizontal && yCq < allelicSetting.vertical) {
          if (data.wells[index].type === WELL_TYPE.UNK) {
            cloneAllelicTableWell[index] = "heterozygote";
            dataItem.call = "Heterozygote";
          } else if (data.wells[index].type === WELL_TYPE.POS) {
            cloneAllelicTableWell[index] = "allele1allele2";
            dataItem.call = "Control Heterozygote";
          }
        }
        // 第四象限
        if ((xCq >= allelicSetting.horizontal || xCq < 0) && yCq < allelicSetting.vertical) {
          if (data.wells[index].type === WELL_TYPE.UNK) {
            cloneAllelicTableWell[index] = "allele2";
            dataItem.call = "Allele 2";
          } else if (data.wells[index].type === WELL_TYPE.POS) {
            cloneAllelicTableWell[index] = "control2";
            dataItem.call = "Control 2";
          }
        }
      } else {
        xCq = item.lines[xChannelIndex][DATA_ANALYSIS_METHOD['Raw Data']][allelicSetting.cycle - 1];
        yCq = item.lines[yChannelIndex][DATA_ANALYSIS_METHOD['Raw Data']][allelicSetting.cycle - 1];
        let angle = slopToAngle(yCq, xCq);
        //区分四组中Task不同的情况:进行对well和call更新
        if (data.wells[index].type === WELL_TYPE.NTC) {
          cloneAllelicTableWell[index] = "ntc";
          dataItem.call = "NTC";
        } else if (angle <= center.degree[2] && angle >= center.degree[1]) {
          if (data.wells[index].type === WELL_TYPE.UNK) {
            cloneAllelicTableWell[index] = "heterozygote";
            dataItem.call = "Heterozygote";
          } else if (data.wells[index].type === WELL_TYPE.POS) {
            cloneAllelicTableWell[index] = "allele1allele2";
            dataItem.call = "Control Heterozygote";
          }
        } else if (angle > center.degree[2]) {
          if (data.wells[index].type === WELL_TYPE.UNK) {
            cloneAllelicTableWell[index] = "allele2";
            dataItem.call = "Allele 2";
          } else if (data.wells[index].type === WELL_TYPE.POS) {
            cloneAllelicTableWell[index] = "control2";
            dataItem.call = "Control 2";
          }
        } else if (angle <= center.degree[0]) {
          if (data.wells[index].type === WELL_TYPE.UNK) {
            cloneAllelicTableWell[index] = "allele1";
            dataItem.call = "Allele 1";
          } else if (data.wells[index].type === WELL_TYPE.POS) {
            cloneAllelicTableWell[index] = "control1";
            dataItem.call = "Control 1";
          }
        }
      }
      tableData.push(dataItem);
    });
    dispatch(saveAllelicTableWell(cloneAllelicTableWell));
    dispatch(saveAllelicTableData(tableData));
  }, [data, allelicSetting, allelicSetting.xAxis, allelicSetting.yAxis, allelicSetting.cycle, allelicSetting.horizontal, allelicSetting.vertical, isCq, angles, angleSetting]);

  //  改变 Cycle
  const getCycle = useDebounce(value => {
    if (Number(value) > pcrAllCycle) {
      dispatch(saveAllelicSetting({...allelicSetting, cycle: pcrAllCycle}));
    } else if (Number(value) <= 0) {
      dispatch(saveAllelicSetting({...allelicSetting, cycle: 1}));
    } else {
      dispatch(saveAllelicSetting({...allelicSetting, cycle: Number(value)}));
    }
    setAngle([]);
  }, 200);

  //表格行点击事件
  function allelicTableClick(wellId) {
    console.log(wellId);

  }


  return (
    <div className="allelic">
      <section className="allelicTop">
        <div className="allelicTopLeft">
          <div className="allelicTopButton">
            <div>{isCN ? "等位基因分析" : "Allelic Discrimination"}</div>
            <ul>
              <li style={!isCq ? {backgroundColor: "#213040", color: "#fff"} : null}
                  onClick={() => setIsCq(false)}
              >RFU
              </li>
              <li style={isCq ? {backgroundColor: "#213040", color: "#fff"} : null}
                  onClick={() => setIsCq(true)}
              >Cq
              </li>

            </ul>
          </div>
          <div style={{position: "relative"}}>
            <ul className="allelicChartTitle">
              <li style={{width: 120, height: 50}}>
                <div className="allele1"/>
                <div>{isCN ? "等位基因1" : "Allele 1"}</div>
              </li>
              <li style={{width: 120, height: 50}}>
                <div className="allele2"/>
                <div>{isCN ? "等位基因2" : "Allele 2"}</div>
              </li>
              <li style={{width: 130, height: 50}}>
                <div className="heterozygote"/>
                <div>{isCN ? "杂合子" : "Heterozygote"}</div>
              </li>
              <li style={{width: 80, height: 50}}>
                <div className="ntc"/>
                <div>NTC</div>
              </li>
              <li style={{width: 120, height: 50}}>
                <div className="undeterimined"/>
                <div>{isCN ? "未确定" : "Undefined"}</div>
              </li>
              <li style={{width: 85, height: 50}}>
                <div className="control1"/>
                <div>{isCN ? "对照1" : "Ctrl 1"}</div>
              </li>
              <li style={{width: 85, height: 50}}>
                <div className="control2"/>
                <div>{isCN ? "对照2" : "Ctrl 2"}</div>
              </li>
              <li style={{width: 165, height: 50}}>
                <div className="allele1allele2"/>
                <div>{isCN ? "杂合子对照" : "Ctrl Heterozygote"}</div>
              </li>
            </ul>
            <div
              className="xTitle">{isCq ? `Cq for Allele 1 - ${allelicSetting.xAxis}` : `RFU for Allele 1 - ${allelicSetting.xAxis}`}</div>
            <div
              className="yTitle">{isCq ? `Cq for Allele 2 - ${allelicSetting.yAxis}` : `RFU for Allele 2 - ${allelicSetting.yAxis}`}</div>
            <AllelicChart option={allelicOption}
                          option2={allelicOption2}
                          isCq={isCq}
                          angles={angles}
                          centerInfo={center}
                          seriesData={series}
                          wellId={wellId}
                          setWellId={setWellId}
            />
          </div>
        </div>
        <div className="allelicTopRight">
          <div>{isCN ? "等位基因结果" : "Assigning Calls"}</div>
          <div>
            <div className="tableStyle scrollBarStyle allelicTopRightTable" style={{overflow: "auto"}}>
              <ul>
                <li>{isCN ? "反应孔" : "Well"}</li>
                <li>{isCN ? "忽略" : "Omit"}</li>
                <li>{isCN ? "样品" : "Sample Name"}</li>
                <li>{isCN ? "类型" : "Task"}</li>
                {
                  isCq ? <li>{isCN ? "等位基因1 Cq" : "Allele1 Cq"}</li> : <li>{isCN ? "等位基因1 RFU" : "Allele1 RFU"}</li>
                }
                {
                  isCq ? <li>{isCN ? "等位基因2 Cq" : "Allele2 Cq"}</li> : <li>{isCN ? "等位基因2 RFU" : "Allele2 RFU"}</li>
                }
                <li>{isCN ? "结果" : "Call"}</li>
                <li>{isCN ? "备注" : "Comments"}</li>
              </ul>
              {/*TODO: 表格数据*/}
              {
                allelicTableData.map((item, index_) => (
                  <ul key={item.well + index_}
                      id={index_}
                      style={{backgroundColor: index_ === wellId ? "rgb(177,172,172)" : '', cursor: 'pointer'}}
                      onClick={() => {
                        setWellId(index_);
                      }}
                  >
                    <li>{item.well}</li>
                    <li>{item.omit}</li>
                    <li>{item.sampleName}</li>
                    <li>{item.task}</li>
                    {
                      isCq ? <li>{item.allele1Cq}</li> : <li>{item.allele1RFU}</li>
                    }
                    {
                      isCq ? <li>{item.allele2Cq}</li> : <li>{item.allele2RFU}</li>
                    }
                    <li>{item.call}</li>
                    <li>{item.comments}</li>
                  </ul>
                ))
              }
            </div>
            <AllelicTable setWellId={setWellId}
                          wellId={wellId}
            />
          </div>
        </div>
      </section>
      <section className="allelicBottom">
        <div className="allelicBottomLeft">
          <header>{isCN ? "荧光标记设置" : "Fluorophores Assign"}</header>
          <div>
            <div>
              <div className="icon_rhombus"/>
            </div>
            <div>{isCN ? "X轴等位基因1的荧光标记" : "X-Axis Allele 1th Flourophore"}</div>
            <Dropdown
              overlay={
                <Menu>
                  {
                    axisAllele.map((item, index) => (
                      <Menu.Item key={item + index}>
                        <div style={{...MENU_STYLE, width: "125px", marginBottom: 5}}
                             onClick={() => {
                               cloneAllelicSetting = deepClone(allelicSetting, cloneAllelicSetting);
                               cloneAllelicSetting.xAxis = item;
                               dispatch(saveAllelicSetting(cloneAllelicSetting));
                             }}
                        >{item}</div>
                      </Menu.Item>
                    ))
                  }
                </Menu>
              }
              overlayClassName="antdDropDownStyle"
              placement="bottomCenter"
              trigger={['click']}
            >
              <div>
                <div>{allelicSetting.xAxis}</div>
              </div>
            </Dropdown>
          </div>
          <div>
            <div>
              <div className="icon_cycle"/>
            </div>
            <div>{isCN ? "Y轴等位基因2的荧光标记" : "Y-Axis Allele 2th Flourophore"}</div>
            <Dropdown
              overlay={
                <Menu>
                  {
                    axisAllele.map((item, index) => (
                      <Menu.Item key={item + index}>
                        <div style={{...MENU_STYLE, width: "125px", marginBottom: 5}}
                             onClick={() => {
                               cloneAllelicSetting = deepClone(allelicSetting, cloneAllelicSetting);
                               cloneAllelicSetting.yAxis = item;
                               dispatch(saveAllelicSetting(cloneAllelicSetting));
                             }}
                        >{item}</div>
                      </Menu.Item>
                    ))
                  }
                </Menu>
              }
              overlayClassName="antdDropDownStyle"
              placement="bottomCenter"
              trigger={['click']}
            >
              <div>
                <div>{allelicSetting.yAxis}</div>
              </div>
            </Dropdown>
          </div>
          <div>
            <div/>
            <div>{isCN ? "循环数选择" : "Select Cycle"}</div>
            <input type="number"
                   readOnly={isCq}
                   value={allelicSetting.cycle}
                   onChange={e => getCycle(e.target.value)}
            />
          </div>
        </div>
        <div className="allelicBottomRight">
          <div>
            <div>{isCN ? "分析模式" : "Assign Call"}</div>
            <div>
              <div style={allelicSetting.assignCallAuto ? {backgroundColor: "#fff", color: "#213040"} : null}
                   onClick={() => {
                     cloneAllelicSetting = deepClone(allelicSetting, cloneAllelicSetting);
                     cloneAllelicSetting.horizontal = 37;
                     cloneAllelicSetting.vertical = 37;
                     cloneAllelicSetting.assignCallAuto = true;
                     dispatch(saveAllelicSetting(cloneAllelicSetting));
                     dispatch(saveAllelicSetting(cloneAllelicSetting));
                   }}
              >{isCN ? "自动" : "Auto"}
              </div>
              <div style={!allelicSetting.assignCallAuto ? {backgroundColor: "#fff", color: "#213040"} : null}
                   onClick={() => dispatch(saveAllelicSetting({...allelicSetting, assignCallAuto: false}))}
              >{isCN ? "手动" : "Manual"}
              </div>
            </div>
          </div>
          {
            isCq
              ? <div>
                <div>{isCN ? "阈值" : "Threshold"}</div>
                <div>
                  <div>
                    <div>
                      <div style={{backgroundColor: "#1f66ff", height: 40, width: 20, borderRadius: 15, margin: "auto"}}/>
                    </div>
                    <div>{isCN ? "垂直" : "Vertical"}</div>
                    <div>{allelicSetting.horizontal}</div>
                    {/*<input type="number"*/}
                    {/*       defaultValue={allelicSetting.vertical}*/}
                    {/*       onChange={e => getVertical(Number(e.target.value))}*/}
                    {/*  // onBlur={e => dispatch(saveAllelicSetting({...allelicSetting, vertical: Number(e.target.value)}))}*/}
                    {/*/>*/}
                  </div>
                  <div>
                    <div>
                      <div style={{backgroundColor: "#ff1f1f", height: 20, width: 40, borderRadius: 15, margin: "auto"}}/>
                    </div>
                    <div>{isCN ? "水平" : "Horizontal"}</div>
                    <div>{allelicSetting.vertical}</div>
                    {/*<input type="number"*/}
                    {/*       value={allelicSetting.horizontal}*/}
                    {/*       onChange={e => getHorizontal(Number(e.target.value))}*/}
                    {/*/>*/}
                  </div>
                </div>
              </div>
              : null
          }

        </div>
      </section>
    </div>
  );
});
